<template>
    <Layout :showHome="false">
        <div class="chart-swipe">
            <van-swipe class="my-swipe" :autoplay="10000" indicator-color="white">
                <van-swipe-item>
                    <div class="chart-box" ref="lineNode"></div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="chart-box" ref="pieNode"></div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="funcational">
            <div class="func-list" v-for="it in funcList" :key="it.title">
                <title>{{it.title}}</title>
                <div class="box">
                    <div class="item" @click="toPage(fu)" v-for="(fu, i) in it.items" :key="fu.id + i">
                        <!-- <i>{{it.icon}} === innerText</i> -->
                        <i v-html="fu.icon"/>
                        <span>{{fu.name}}</span>
                    </div>
                </div>
            </div>
        </div>
    </Layout>
</template>

<script>
    import { collectApi } from '@/apis/homeApi'
    import io from 'socket.io-client'
    import echarts from 'echarts'

    export default {
        data() {
            return {
                funcList: [
                    {
                        title: '基础数据',
                        items: [
                            {id: 'SYSTEM-01-05', path: '/product/list', name: '物资管理', icon: '&#xe6db;', right: 'R'},
                            {id: 'SYSTEM-01-05', path: '/product/edit', name: '物资新建', icon: '&#xe6dc;', right: 'C'},
                            {id: 'SYSTEM-01-06', path: '/supplier/list', name: '供应商管理', icon: '&#xe6e3;', right: 'R'},
                            {id: 'SYSTEM-01-06', path: '/supplier/edit', name: '供应商新建', icon: '&#xe6e4;', right: 'C'}
                        ]
                    },
                    {
                        title: '项目管理',
                        items: [
                            {id: 'PROJECT-01-01', name: '项目管理', path: '/project/list', icon: '&#xe744;', right: 'R'},
                            {id: 'PROJECT-01-02', name: '项目新建', path: '/project/edit', icon: '&#xe74f;', right: 'C'}
                        ]
                    },
                    {
                        title: '采购管理',
                        items: [
                            {id: 'PURCHASE-01-01', name: '采购管理', icon: '&#xe714;', path: '/purchase/list', right: 'R'},
                            {id: 'PURCHASE-01-02', name: '采购新建', icon: '&#xe715;', path: '/purchase/edit', right: 'C'}
                        ]
                    },
                    {
                        title: '收货管理',
                        items: [
                            {id: 'RECEIVING-01-01', name: '收货管理', icon: '&#xe71e;', path: '/recevie/list', right: 'R'},
                            {id: 'RECEIVING-01-02', name: '收货新建', icon: '&#xe71a;', path: '/recevie/edit', right: 'C'}
                        ]
                    },
                    {
                        title: '系统管理',
                        items: [
                            {id: '', name: '设置', path: '/setting', icon: '&#xe6d8;'}
                        ]
                    }
                ],
                // 用户的权限信息
                userRights: [],
                loopTimer: null,
                lineChart: null,
                pieChart: null,
                mySocket: null
            }
        },
        created() {
            this.userRights = this.$store.getters['common/userRole']
        },
        mounted() {
            // // 链接websocket
            // const socket = io('http://www.shuiyue.info:20000')
            // // 监听链接消息 -- connect
            // socket.on('connect', function() {
            //     console.log('-------------------------------- socket connect success')
            //     // 发送数据给后端
            //     socket.emit('clientEvt', {type: 'getTodayHot'})
            //     // 链接后，等3s断开连接 -- 这里是测试断开的代码
            //     // setTimeout(function() {
            //     //     socket.close()
            //     // }, 5000)
            // })

            // // 监听连接端口消息 -- disconnect
            // socket.on('disconnect', function() {
            //     console.log('-------------------------------- socket disconnect')
            // })

            // // 监听后端推送的数据消息
            // socket.on('serverEvt', data => {
            //     // console.log('------------------------------- server data')
            //     // console.log(data)

            //     this.renderPie(data)
            // })

            // this.mySocket = socket

            // 在这里进行echarts的初始化，初始化的时候一定要传递一个dom对象
            this.lineChart = echarts.init(this.$refs.lineNode)
            this.pieChart = echarts.init(this.$refs.pieNode)
            // 轮询获取收款信息
            this.loopCollect()
        },
        methods: {
            // 绘制饼图
            renderPie(data) {
                let option = {
                    color: ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
                    title: [{
                        text: '已收',
                        top: '40%',
                        left: '25%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: 16,
                            color:'#85a5ff',
                            fontWeight: 400
                        }
                    },{
                        text: (data.find(it => it.name === '已收款').amount * 1).toFixed(2),
                        top: '48%',
                        left: '25%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: 22,
                            color:'#10239e',
                            fontWeight: 400
                        }
                    },{
                        text: '已付',
                        top: '40%',
                        left: '75%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: 14,
                            color:'#85a5ff',
                            fontWeight: 400
                        }
                    },{
                        text: (data.find(it => it.name === '已付款').amount * 1).toFixed(2),
                        top: '48%',
                        left: '75%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: 22,
                            color:'#10239e',
                            fontWeight: 400
                        }
                    }],
                    series: [{
                        type: 'pie',
                        radius: ['42%', '50%'],
                        center: ['25%', '50%'],
                        data: [
                            (data.find(it => it.name === '应收款').amount * 1).toFixed(2),
                            (data.find(it => it.name === '未收款').amount * 1).toFixed(2)
                        ],
                        hoverAnimation: false,
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 2
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: false
                        },
                    }, {
                        type: 'pie',
                        radius: ['42%', '50%'],
                        center: ['75%', '50%'],
                        data: [
                            (data.find(it => it.name === '应付款').amount * 1).toFixed(2),
                            (data.find(it => it.name === '未付款').amount * 1).toFixed(2)
                        ],
                        hoverAnimation: false,
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 2
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: false
                        },
                    }]
                }

                this.pieChart.setOption(option)
            },
            // 轮询获取收款信息
            async loopCollect() {
                let result = await collectApi()
                // 渲染chart图
                let xLabel = []
                let total = []
                let received = []
                let receiving = []


                if (result.code === 200) {
                    result.data.forEach(it => {
                        xLabel.push(it.date.substring(5))
                        total.push(it.total)
                        received.push(it.received)
                        receiving.push(it.receiving)
                    })
                }


                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        top: 10,
                        type: 'plain',
                        textStyle: {
                            color: '#10239e',
                            fontSize: 10
                        },
                        itemGap: 12,
                        itemWidth: 16,
                        data: ['合计', '已收', '未收']
                    },
                    grid: {
                        top: 36,
                        left: 50,
                        right: 12,
                        bottom: 42
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                            color: '#10239e'
                            }
                        },
                        axisLabel: {
                            rotate: 26,
                            interval: 0,
                            textStyle: {
                                color: '#10239e',
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false,
                        },
                        data: xLabel
                    }],
                    yAxis: [{
                        min: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                            color: '#10239e'
                            }
                        },
                        axisLabel: {
                            rotate: 26,
                            textStyle: {
                                color: '#10239e',
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false,
                        }
                    }],
                    series: [
                        {
                            name: '合计',
                            type: 'line',
                            symbol: 'circle',
                            showAllSymbol: true,
                            symbolSize: 4,
                            smooth: true,
                            lineStyle: {
                                normal: {
                                    width: 1,
                                    color: "rgba(255,163,223,1)",
                                },
                                borderColor: 'rgba(0,0,0,.4)',
                            },
                            itemStyle: {
                                color: "rgba(25,163,223,1)",
                                borderColor: "#646ace",
                                borderWidth: 1
                            },
                            tooltip: {
                                show: true
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "rgba(25,163,223,.3)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(25,163,223, 0)"
                                        }
                                    ], false),
                                    shadowColor: 'rgba(25,163,223, 0.5)',
                                    shadowBlur: 20
                                }
                            },
                            data: total
                        },
                        {
                            name: '已收',
                            type: 'line',
                            symbol: 'circle',
                            showAllSymbol: true,
                            symbolSize: 4,
                            smooth: true,
                            lineStyle: {
                                normal: {
                                    width: 1,
                                    color: "rgba(25,163,223,1)",
                                },
                                borderColor: 'rgba(0,0,0,.4)',
                            },
                            itemStyle: {
                                color: "rgba(25,163,223,1)",
                                borderColor: "#646ace",
                                borderWidth: 1

                            },
                            tooltip: {
                                show: true
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "rgba(25,163,223,.3)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(25,163,223, 0)"
                                        }
                                    ], false),
                                    shadowColor: 'rgba(25,163,223, 0.5)',
                                    shadowBlur: 20
                                }
                            },
                            data: received
                        },
                        {
                            name: '未收',
                            type: 'line',
                            symbol: 'circle',
                            showAllSymbol: true,
                            symbolSize: 4,
                            smooth: true,
                            lineStyle: {
                                normal: {
                                    width: 1,
                                    color: "rgba(25,163,223,1)",
                                },
                                borderColor: 'rgba(0,0,0,.4)',
                            },
                            itemStyle: {
                                color: "rgba(25,163,223,1)",
                                borderColor: "#646ace",
                                borderWidth: 1

                            },
                            tooltip: {
                                show: true
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "rgba(25,163,223,.3)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(25,163,223, 0)"
                                        }
                                    ], false),
                                    shadowColor: 'rgba(25,163,223, 0.5)',
                                    shadowBlur: 20
                                }
                            },
                            data: receiving
                        }
                    ]
                }

                // echarts 的第二个方法--绘制方法
                this.lineChart.setOption(option)

                this.loopTimer = setTimeout(() => {
                    this.loopCollect()
                }, 3000)
            },
            // 菜单功能点权限拦截--按钮点击权限拦截
            toPage(menu) {
                // 因为网络问题，所以暂时频闭
                // if (!menu.right) {
                //     this.$router.push(menu.path)
                //     return
                // }

                // let right = this.userRights.find(it => it.id === menu.id)
                // if (!right) {
                //     this.$toast.fail('您没有这个菜单的任何权限')
                //     return
                // }

                // if (!right.role.includes(menu.right)) {
                //     this.$toast.fail(`您没有【${menu.name}】权限`)
                //     return
                // }

                this.$router.push(menu.path)
            }
        },
        beforeDestroy() {
            clearTimeout(this.loopTimer)
            if (this.mySocket) this.mySocket.close()
        }
    }
</script>

<style lang="less" scoped>
    @import '../../style/common.less';

    .chart-box {
        display: block;
        position: relative;
        height: 280px;
    }

    .chart-swipe {
        display: block;
        height: 280px;
    }
    .funcational {
        display: block;
        padding: 0 @12 @12;
        > .func-list {
            display: block;
            margin-bottom: @12;
            &:last-child {
                margin-bottom: 0;
            }
            background-color: @cf;
            > title {
                display: block;
                height: 42px;
                border-bottom: solid 1px @c9;
                padding-left: 12px;
                &::before {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    height: 22px;
                    width: 2px;
                    background-color: @c3;
                    margin-right: 12px;
                }
                font-size: .8rem;
                color: @c3;
                line-height: 41px;
            }
            > .box {
                display: flex;
                flex-wrap: wrap;
                > .item {
                    flex: 0 0 25%;
                    width: 0;
                    padding-top: 6px;
                    margin-bottom: 10px;
                    > i {
                        display: block;
                        width: 36px;
                        height: 36px;
                        margin: auto;
                        text-align: center;
                        line-height: 36px;
                        // .nuolai-ft(@color: #f0f);
                        // .nuolai-ft(1.3rem);
                        // .nuolai-ft(1.3rem, #f00);
                        // .nuolai-ft(@color: #f00, @size: 1.4rem);
                        .hc-ft(1.3rem);
                    }
                    > span {
                        display: block;
                        text-align: center;
                        font-size: .6rem;
                        line-height: 20px;
                        color: @c4;
                    }
                }
            }
        }
    }

    // .home-container {
    //     display: block;
    //     position: relative;
    //     height: 100%;
    //     > header {
    //         display: block;
    //         height: 48px;
    //         line-height: 48px;
    //         font-size: .9rem;
    //         text-align: center;
    //         color: @cf;
    //         background-color: @c3;
    //     }
    //     > article {
    //         display: block;
    //         height: calc(100% - 48px);
    //         overflow-x: hidden;
            
    //     }
    // }
</style>